<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <!-- 表格内搜索表单 -->
      <common-form
        style=""
        :form-infos="searchForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onSearchSubmit"
      />
      <el-button size="small" @click="isShowDialog = !isShowDialog"
        >添加数据</el-button
      >
      <template #expand="props">
          {{props.props.row}}
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '表格标题',
      attrs: {
        data: [ //表格需要的数据
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
       
        {
          type: "selection",  //多选框Attribute
        },
        {
          prop: "name",
          label: "账户",
        },
        {
          prop: "level",
          label: "会员等级",
        },
        {
          prop: "order",
          label: "积分",
          sortable: true,
        },
        {
          prop: "price",
          label: "余额",
          sortable: true,
        },
        {
          prop: "",
          label: "成长值",
          sortable: true,
        },
        {
          prop: "time",
          label: "最后登陆时间",
          sortable: true,
        },
      ],
      // 操作按钮
      controller: ["详情", "更多"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 0,
        name: "CommonSelect",
        prop: "fruit",
        value: "",
        options: {
          "1": "用户名",
          "2": "昵称",
          "3": "手机号",
        },
        formItemAttrs: {
          label: "选择器",
        },
        inputAttrs: {
          placeholder: "账号",
        },
      },
      {
        id: 1,
        name: "CommonInput",
        prop: "s2",
        value: "",
        formItemAttrs: {
          label: "",
        },
        inputAttrs: {
          type: "text",
          placeholder: "用户名/昵称/手机号",
        },
      },
      
      
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "f2",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
